<template>
	<view class="moadal" v-show="visible">
		<view class="popup">
			<view class="popup-head">
				<view
					@tap="cancel()"
					class="popup-head-both-sides"
					style="border-top-left-radius: 16upx;">
					<text>取消</text>
				</view>
				<view class="popup-head-title">
					<text>{{title}}</text>
				</view>
				<view
					@tap="determine()"
					class="popup-head-both-sides"
					style="border-top-right-radius: 16upx; color: #2D85F6;">
					<text>确定</text>
				</view>
			</view>
			<view class="scroll-view">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PassengerSelectMoadl',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '标题'
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			cancel() {
				this.$emit("cancel");
				this.$emit("update:visible", false);
			},
			
			determine() {
				this.$emit("determine");
				this.$emit("update:visible", false);
			}
		}
	}
</script>

<style lang="scss">
	.moadal {
		position: fixed;
		display: flex;
		flex-direction: column-reverse;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:10000;
		background: RGBA(80, 80, 80, 0.5);
		.popup {
			background: #FFFFFF;
			border-top-left-radius: 16upx;
			border-top-right-radius: 16upx;
			height: 70%;
			display: flex;
			flex-direction: column;
			.scroll-view {
				height: 100%;
			}
			.popup-head {
				height: 100upx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				.popup-head-both-sides {
					width: 100upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666463;
					font-size: 30rpx;
				}
				.popup-head-title {
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
				}
			}
		}
	}
</style>
